<template>
	<view class="index">
		<view class="title">
			<!-- <u-navbar class="navbar" :is-back="false" title=" " :background="background">
				
			</u-navbar> -->
			<view class="slot-wrap">
				<view class="x_input">
					<u-input v-model="value" @tap="searchIndex" placeholder="请输入搜索信息" disabled="disabled" height="66" type="text" :border="false" />
					<image src="/static/home/search.png"></image>
				</view>
				<view class="x_news" @tap="newsList">
					<image src="/static/home/news.png"></image>
					<!-- <view class="is_news" v-if="is_show == 1">1</view> -->
					<view class="is_news_x" v-if="is_show > 0"></view>
				</view>
			</view>
			<view class="swipe">
				<u-swiper :list="list" name="thumb" height="320" border-radius="8" bg-color="transparent"></u-swiper>
			</view>
		</view>
		<view class="middle" @tap="orderPractice">
			<view class="img">
				<view class="middle_1">顺序练习</view>
				<view class="middle_2">全真考题库</view>
			</view>
		</view>
		<view class="bottom">
			<view class="left" @tap="getRandom">
				<view class="left_1">随机练习</view>
				<view class="left_2">小题狂练</view>
			</view>
			<view class="right" @tap="simulationTest">
				<view class="right_1">模拟考试</view>
				<view class="right_2">100%仿真</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'transparent',
				},
				value: '',
				list: [],
				history: [],
				is_show: '',
				token: ''
			}
		},
		onLoad() {
			// console.log(this.letterList)
			uni.showLoading({
				title: '加载中'
			})
			this.getSwipeInfo()
		},
		onShow() {
			// this.history = uni.getStorageSync('history') ? JSON.parse(uni.getStorageSync('history')) : [],
			this.messageInfo()
			this.token = uni.getStorageSync('USER_TOKEN');
		},
		created() {
			// console.log(this.letterList.length)
		},
		methods: {
			searchIndex() {
				// if (this.value) {
				// 	if(this.history.indexOf(this.value) == -1) {
				// 		if (this.history.length < 5) {
				// 			this.history.unshift(this.value)
				// 		} else {
				// 			this.history.pop();
				// 			this.history.unshift(this.value)
				// 		}
						
				// 	} else {
				// 		let index = this.history.indexOf(this.value)
				// 		this.history.splice(index, 1)
				// 		this.history.unshift(this.value)
				// 	}
				// 	uni.setStorageSync('history', JSON.stringify(this.history))
				// 	uni.navigateTo({
				// 		url: '/pages/home/search/searchList?value=' + this.value
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages/home/search/search'
				// 	})
				// }
				uni.navigateTo({
					url: '/pages/home/search/search'
				})
			},
			newsList() {
				if (!this.token) {
					uni.redirectTo({
						url: '/pages/login/login/index'
					});
				} else {
					uni.navigateTo({
						url: '/pages/home/news/news'
					})
				}
				
			},
			// 顺序练习
			orderPractice() {
				if (!this.token) {
					uni.redirectTo({
						url: '/pages/login/login/index'
					});
				} else {
					uni.navigateTo({
						url: '/pages/home/home/questionBank?type=' + 1 + '&random=' + 0
					})
				}
				
			},
			// 随机练习
			getRandom() {
				if (!this.token) {
					uni.redirectTo({
						url: '/pages/login/login/index'
					});
				} else {
					uni.navigateTo({
						url: '/pages/home/home/questionBank?type=' + 1 + '&random=' + 1
					})
				}
			},
			// 模拟考试
			simulationTest() {
				if (!this.token) {
					uni.redirectTo({
						url: '/pages/login/login/index'
					});
				} else {
					uni.navigateTo({
						url: '/pages/home/home/questionBank?type=' + 2
					})
				}
			},
			// 轮播图数据
			getSwipeInfo() {
				this.$api.post(global.apiUrls.getSwipe, {
					typeid: 3
				}).then(res => {
					uni.hideLoading()
					// console.log(res)
					if (res.data.code == 1) {
						this.list = res.data.data
						if (this.list.length != 0) {
							this.list.forEach((v, k) => {
								v.thumb = v.thumb + '-686_320'
							})
						}
					} else {
						this.$message.info(res.data.msg)
					}
				})
			},
			// 搜索框的消息
			messageInfo() {
				this.$api.post(global.apiUrls.getMessage, {
					
				}).then(res => {
					if (res.data.code == 1) {
						this.is_show = res.data.data
					} else {
						this.$message.info(res.data.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './home.scss';

	page {
		background: #F5F6F7;
		color: #333333;
	}

	.index {
		.title {
			width: 100%;
			height: 330rpx;
			background: url(../../../static/home/title_bg.png) no-repeat;
			background-size: 100% 100%;
			// padding-top: 45rpx;
			.navbar {
				
				
			}
			.slot-wrap {
				padding: 65rpx 32rpx 6rpx;
				// position: relative;
				
				display: flex;
				// margin-bottom: 24rpx;
				// position: fixed;
				// top: 130rpx;
				width: 100%;
				z-index: 10;
				// background: #FFFFFF;
			
				.x_input {
					width: 100%;
					background: #F6F7F9 !important;
					opacity: 1;
					border-radius: 8rpx;
					height: 66upx;
					position: relative;
					line-height: 66rpx;
					/deep/.u-input__input {
						padding-left: 63rpx;
						height: 66upx;
						line-height: 66rpx;
					}
					/deep/.u-input__right-icon {
						padding-right: 16rpx;
						transform: translateY(3rpx);
					}
			
					image {
						position: absolute;
						left: 24rpx;
						top: 50%;
						width: 26rpx;
						height: 26rpx;
						transform: translateY(-50%);
					}
				}
			
				.x_news {
					width: 44rpx;
					height: 44rpx;
					margin-left: 40rpx;
					position: relative;
			
					image {
						width: 44rpx;
						height: 44rpx;
						transform: translateY(8rpx);
					}
			
					.is_news {
						width: 28rpx;
						height: 28rpx;
						background: #FF6B54;
						opacity: 1;
						border-radius: 50%;
						line-height: 28rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 20rpx;
						position: absolute;
						right: -5rpx;
						top: -6rpx;
					}
					.is_news_x {
						display: inline-block;
						width: 16rpx;
						height: 16rpx;
						background: #FF5656;
						border-radius: 50%;
						position: absolute;
						right: 0rpx;
						top: 4rpx;
					}
				}
			}
			.swipe {
				padding: 28rpx 32rpx;
				height: 320rpx;
				border-radius: 16rpx;
				/deep/.u-swiper-indicator {
					transform: translateY(-6rpx);
				}
			}
		}
		.middle {
			width: 100%;
			height: 268rpx;
			padding: 184rpx 32rpx;
			.img {
				height: 268rpx;
				width: 100%;
				background: url(../../../static/home/home_middle.png) no-repeat;
				background-size: 100% 100%;
				padding-top: 78rpx;
				.middle_1 {
					padding-left: 396rpx;
					
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 800;
					line-height: 56rpx;
					color: #029773;
					margin: 0 0 16rpx 0;
				}
				.middle_2 {
					padding-left: 396rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #2EC19E;
				}
			}
		}
		.bottom {
			display: flex;
			padding: 115rpx 32rpx 130rpx;
			text-align: center;
			.left {
				width: 330rpx;
				height: 420rpx;
				background: url(../../../static/home/home_left.png) no-repeat;
				background-size: 100% 100%;
				margin-right: 26rpx;
				padding-top: 278rpx;
				.left_1 {
					
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 800;
					line-height: 56rpx;
					color: #345A8B;
					margin-bottom: 16rpx;
				}
				.left_2 {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #8DA1BD;
				}
			}
			.right {
				width: 330rpx;
				height: 420rpx;
				background: url(../../../static/home/home_right.png) no-repeat;
				background-size: 100% 100%;
				padding-top: 278rpx;
				.right_1 {
					
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 800;
					line-height: 56rpx;
					color: #345A8B;
					margin-bottom: 16rpx;
				}
				.right_2 {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #8DA1BD;
				}
			}
		}
	}
</style>
